var carousel = (function () {
    var  _this = null,
        timeId1 = null,
        timeId2 = null,
        $indicators = $(".screen .indicators"),
        $ind_item = $(".screen .indicators li"),
        $ind_item_length = $ind_item.length,
        $inner = $('.screen .inner'),
        // inner的宽度
        $item = $(".screen .inner .item"),
        $item_active_index = $(".screen .inner .item.active").index(),
        // item的宽度
        $itemWidth = $item.width(),
        // 第一个item
        $itemindex0 = $item.eq(0),
        // item的个数
        $item_length = $item.length,
        // 下标
        index = $item_active_index ? $item_active_index : 0,
        // 定时间隔
        $intervalTime = 10,
        // 轮播一页的时间
        $data_time = $('.screen').attr('data-time'),
        $time = $data_time ? $data_time > 1000 ? 1000 : $data_time : 200,
        // 每次移动的距离
        step_num = 10,
        //是否自动播放
        $auto = $('.screen').attr('auto-play'),
        // 自动播放间隔时间
        $auto_delay_time = $('.screen').attr('auto-delay-time') ? $('.screen').attr('auto-delay-time') : 5000,
        // 鼠标移入暂停
        $mouse_enter_stop = $(".mouse_enter_stop").length > 0 ? $(".mouse_enter_stop") : $(".screen")
    return {
        // 统一设置
        setIndItem:function() {
            //设置小按钮的颜色---所有的小按钮干掉颜色
            for (var i = 0; i < $ind_item_length; i++) {
                $ind_item.eq(i).removeClass("active");
            }
            //当前的index索引对应的按钮设置颜色
            $ind_item.eq(index).addClass("active");
        },
        // 移动
        move:function(element, target) {
            clearInterval(element.timeId);
            element.timeId = setInterval(function () {
                var cur_left = parseInt(element.css('left'));
                var step = step_num;
                step = cur_left < target ? step : -step;
                //当前移动到位置
                cur_left += step;
                if (Math.abs(cur_left - target) > Math.abs(step)) {
                    element.css('left', cur_left + "px");
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    //直接到达目标
                    element.css('left', target + "px");
                }
            }, $intervalTime)
        },
        // 左边按钮事件
        prevFn:function() {
            if (index == 0) {
                index = $item.length - 1;
                $inner.css('left', -index * $itemWidth + "px")
            }
            index--;
            _this.move($inner, -index * $itemWidth);
            _this.setIndItem();
        },
        // 右边按钮事件
        nextFn:function() {
            if (index === $item.length - 1) {
                index = 0;
                $inner.css('left', 0)
            }
            index++;
            _this.move($inner, -index * $itemWidth);
            if (index === $item.length - 1) {
                //第五个按钮颜色干掉
                $ind_item.eq($ind_item_length - 1).removeClass("active");
                //第一个按钮颜色设置上
                $ind_item.eq(0).addClass("active");
            } else {
                _this.setIndItem();
            }
        },
        // 初始化
        init:function() {
            _this = this;
            // 根据时间初始化每次移动的步数
            step_num = $itemWidth / ($time / 10);
            // 初始化inner的宽度
            $inner.css('width', ($item_length + 1) * 100 + "%");
            // 初始化item的宽度
            $item.css('width', 100 / ($item_length + 1) + "%");
            // 初始化默认的幻灯片
            $inner.css('left', -index * $itemWidth + "px")
            // 克隆第一个item到inner中最后
            $inner.append($itemindex0.clone().removeClass('active'));
            $item = $(".screen .inner .item");
            // 指示器居中设置
            $indicators.css('margin-left', -($indicators.width() / 2) + 'px');
            // 显示闪移BUG
            timeId1 = setTimeout(function () {
                $indicators.show();
            }, 100);
            $('.control-prev').on('click', this.prevFn);
            $('.control-next').on('click', this.nextFn);
            $ind_item.on("mouseover", function () {
                index = $(this).attr('data-slide-to');
                for (var i = 0; i < $ind_item_length; i++) {
                    $ind_item.eq(i).removeClass("active");
                }
                $(this).addClass("active");
                _this.move($inner, -index * $itemWidth);
            });
            if ($auto == "true" || !$auto) {
                timeId2 = setInterval(function () {
                    _this.nextFn()
                }, $auto_delay_time);
            }
            $mouse_enter_stop.on("mouseenter", function () {
                clearInterval(timeId2);
                $('.control-btn').show();
            })
            $mouse_enter_stop.on("mouseleave", function () {
                timeId2 = setInterval(function () {
                    _this.nextFn()
                }, $auto_delay_time);
                $('.control-btn').hide();
            })
        }
    }
})();
carousel.init();
